<template>
  <div class="video-show">
    <div class="title-wrap">
      <div class="left-conten">
        <div class="line"></div>
        <span>视频教学</span>
      </div>
      <div class="course-men">
        <!-- 共有<span>12</span>段视频课观看> -->
      </div>
    </div>
    <div
      :style="{
        padding: ruleFormLocal.styleType == 0 && ruleFormLocal.swiperControl.imageShadow == 1 ? '15px 0' : '0',
      }"
    >
      <!-- 轮播 -->
      <banner-swiper 
        :bannerList="dateFactory.imgList" 
        v-if="dateFactory.ruleForm.styleType == 0"
        :swiperControl="ruleFormLocal.swiperControl"
      ></banner-swiper>
      <!-- 滚动 -->
      <banner-scroll 
        :bannerList="dateFactory.imgList" 
        v-if="dateFactory.ruleForm.styleType == 1"
        :scrollControl="ruleFormLocal.scrollControl"
      ></banner-scroll>
      <!-- 图片模板 -->
      <option-right v-if="dateFactory.activeBorder">
        <div class="option-wrap">
          <el-form :model="ruleFormLocal"   label-width="100px">
            <div class="edit-componet-title">
              商品搜索
            </div>
            <el-form-item label="选择模板">
              <div class="templat">
                <div 
                  :class="['template-style',  currentIndex == 0?'active' : '']" 
                  @click="ruleFormLocal.styleType = 0,currentIndex=0"
                >
                  <div class="select">
                    <el-image src="/img/swiper.png"></el-image>
                  </div>
                  <div class="h1">轮播海报</div>
                </div>
                <div 
                  :class="['template-style',  currentIndex == 1?'active' : '']" 
                  @click="ruleFormLocal.styleType = 1,currentIndex=1"
                >
                  <div class="select">
                    <el-image src="/img/three.png"></el-image>
                  </div>
                  <div class="h1">大图横向滑动</div>
                </div>
              </div>
            </el-form-item>
            <!-- 轮播控制 -->
            <template v-if="ruleFormLocal.styleType == 0">
              <el-form-item label="轮播属性" prop="imageShadow">
                <el-radio-group v-model="ruleFormLocal.swiperControl.swiperStyle">
                  <el-radio :label="0">普通轮播</el-radio>
                  <el-radio :label="1">3d轮播</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 普通轮播 -->
              <el-form-item label="页面边距" prop="pagePadding" >
                <div class="side">
                  <el-slider 
                    v-model="ruleFormLocal.swiperControl.pagePadding"
                    :min="0" 
                    :max="30"
                  ></el-slider>
                  <span>{{ruleFormLocal.swiperControl.pagePadding}}像素</span>
                </div>
              </el-form-item>
              <template v-if="ruleFormLocal.swiperControl.swiperStyle != 1">
                
                <el-form-item label="图片样式" prop="imageShadow">
                  <el-radio-group v-model="ruleFormLocal.swiperControl.imageShadow">
                    <el-radio :label="0">常规</el-radio>
                    <el-radio :label="1">投影</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="图片倒角" prop="imageBorder">
                  <el-radio-group v-model="ruleFormLocal.swiperControl.imageBorder">
                    <el-radio :label="0">直角</el-radio>
                    <el-radio :label="1">圆角</el-radio>
                  </el-radio-group>
                </el-form-item>
              </template>

              <!--  -->
              <el-form-item label="指示器" prop="indicator">
                <el-radio-group v-model="ruleFormLocal.swiperControl.indicator" class="radios-wrap">
                  <el-radio :label="0">无</el-radio>
                  <el-radio :label="1">样式2</el-radio>
                  <el-radio :label="2">样式3</el-radio>
                </el-radio-group>
              </el-form-item>
            </template>
            <!-- 滑动控制 -->
            <template v-if="ruleFormLocal.styleType == 1">
              <el-form-item label="页面边距" prop="pagePadding">
                <div class="side">
                  <el-slider 
                    v-model="ruleFormLocal.scrollControl.pagePadding"
                    :min="0" 
                    :max="30"
                  ></el-slider>
                  <span>{{ruleFormLocal.scrollControl.pagePadding}}像素</span>
                </div>
              </el-form-item>
              <el-form-item label="图片边距" prop="imgPadding">
                <div class="side">
                  <el-slider 
                    v-model="ruleFormLocal.scrollControl.imgPadding"
                    :min="0" 
                    :max="30"
                  ></el-slider>
                  <span>{{ruleFormLocal.scrollControl.imgPadding}}像素</span>
                </div>
              </el-form-item>
              <el-form-item label="图片倒角" prop="imageBorder">
                <el-radio-group v-model="ruleFormLocal.scrollControl.imageBorder">
                  <el-radio :label="0">直角</el-radio>
                  <el-radio :label="1">圆角</el-radio>
                </el-radio-group>
              </el-form-item>
            </template>
            

          </el-form>
        </div>
      </option-right>

      
    </div>
  </div>
</template>

<script>
// banner 轮播
import BannerSwiper from './BannerSwiper';
// banner scroll
import BannerScroll from './BannerScroll';

export default {
  name: 'VideoTeaching',
  props: {
    dateFactory: Object,
    index: Number,
    diyData: Array,
  },
  data() {
    return {
      currentIndex: 0,
      ruleFormLocal:this.dateFactory.ruleForm,
    }
  },
  components: {
    BannerSwiper,
    BannerScroll
  },
   watch: {
    ruleFormLocal: {
      handler: function (newValue) {
        console.log(newValue, 'newValuenewValuenewValue')
        this.diyData[this.index].ruleForm = newValue
         if (this.ruleFormLocal.page == 'AboutWe') {
           this.$EventBus.$emit('diyFactoryAboutMe', this.diyData)
        } else if (this.ruleFormLocal.page == 'CurriculumSchedule') {
            this.$EventBus.$emit('diyFactoryCurriShe', this.diyData)
        } else if (this.ruleFormLocal.page == 'Home') {
           this.$EventBus.$emit('diyFactory', this.diyData)
        }else if (this.ruleFormLocal.page == 'ArticleDetail') {
           this.$EventBus.$emit('diyFactoryArticleDetail', this.diyData)
        }else if (this.ruleFormLocal.page == 'MyPage') {
           this.$EventBus.$emit('diyFactoryMyPage', this.diyData)
        }
      },
      deep: true,
    }
  },
  mounted() {
    console.log(this.ruleFormLocal, 'ruleFormLocalruleFormLocal')
  },
  methods: {

  },
}
</script>

<style lang="less" scoped>
  .option-wrap {
    .el-form  {
      .edit-componet-title {
        margin-bottom: 15px;
        padding-bottom: 7px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 14px;
      }
      .el-form-item {
        // 模板模块
        .templat {
          display: flex;
          align-items: center;
          .template-style {
              width: 100px;
              height: 100px;
              display: inline-block;
              border: 1px solid #e5e5e5;
              margin: 0 10px 15px 0;
              padding-top: 5px;
              background-color: #fff;
              text-align: center;
              cursor: pointer;
              &.active {
                border-color: #38f;
              }
              .select {
                width: 100px;
                height: 64px;
                .el-image {
                  width: 90px;
                  height: 60px;
                }
              }
              .h1 {
                height: 30px;
                line-height: 30px;
              }
            }

        }
       
        .border-wrap {
          display: flex;
          align-items: center;
          .el-color-picker {
            margin-right: 12px;
          }
        }
        .radios-wrap {
          .el-radio {
            // margin-top: 10px;
          }
        }
        .side {
          display: flex;
          align-items: center;
          align-items: center;
          .el-slider {
            flex: 1;
          }
          &> span {
            margin-left: 14px;
          }
        }
      }
    }
    

  }
  .video-show {
    background: #fff;
    .title-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 14px 9px;
      .left-conten {
        display: flex;
        align-items: center;
        span {
          font-size: 18px;
          color: #000;
          font-weight: 700;
        }
        .line {
          width: 6px;
          height: 17px;
          background: #64ca38;
          border-radius: 6px;
          margin-right: 7px;
        }
      }
      .course-men {
        font-size: 12px;
        span {
          color: #64ca38;
        }
      }
     
     
    }
  }
</style>